<template>
  <div class="app-container">
    <div class="row-layout">
      <el-row :gutter="10">
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <div class="overhaul-box">
              <div style="display: flex; margin: auto; width: 60%">
                <p class="check-no">检11-1</p>
                <p
                  class="check-no"
                  style="margin-left: 35px"
                  v-if="listFiveObj.type && listFiveObj.type == '断电作业'"
                >
                  {{ listFiveObj.type }}
                </p>
                <p
                  class="check-no"
                  style="margin-left: 35px; color: red"
                  v-if="listFiveObj.type && listFiveObj.type != '断电作业'"
                >
                  {{ listFiveObj.type }}
                </p>
                <p
                  class="check-no"
                  style="color: red; margin-left: 20px; font-size: 24px"
                >
                  {{ listFiveObj.oneStartState }}
                </p>
                <p
                  class="check-no"
                  style="color: red; margin-left: 20px; font-size: 24px"
                >
                  {{ listFiveObj.oneEndState }}
                </p>
              </div>
              <div class="check-top">
                <div class="check-text">车号：</div>
                <div class="check-num">{{ listFiveObj.carCode || "/" }}</div>
                <div class="start-time-text">开始时间：</div>
                <div class="start-time">{{ listFiveObj.startTime || "/" }}</div>
                <div class="duration">计划时间：</div>
                <div class="duration-time">
                  {{ listFiveObj.planTime || "/" }}
                </div>
              </div>
              <div class="check-middle">
                <div
                  style="
                    display: flex;
                    width: 100%;
                    height: 45px;
                    margin-top: 15px;
                  "
                >
                  <span class="team workNamePad">班组：</span>
                  <vue-seamless-scroll
                    :data="listFiveObj.tworkRecordReVoList"
                    :class-option="seamlessScrollOption"
                    class="warp"
                  >
                    <ul class="ul-item">
                      <li
                        :class="classS1(item.workTeamName.length)"
                        v-for="(item, index) in listFiveObj.tworkRecordReVoList"
                        :key="item.id + index"
                      >
                        {{ item.workTeamName }}
                      </li>
                    </ul>
                  </vue-seamless-scroll>
                </div>

                <div
                  style="
                    display: flex;
                    width: 100%;
                    height: 45px;
                    margin-top: 15px;
                  "
                >
                  <span class="team">时间：</span>
                  <vue-seamless-scroll
                    :data="listFiveObj.tworkRecordReVoList"
                    :class-option="seamlessScrollOption"
                    class="warp"
                  >
                    <ul class="ul-item">
                      <li
                        v-for="item in listFiveObj.tworkRecordReVoList"
                        :key="item.id + '5'"
                        class="duration-num"
                        :class="classS1(item.workTeamName.length)"
                      >
                        {{ item.startShortTime }}
                      </li>
                    </ul>
                  </vue-seamless-scroll>
                </div>
              </div>
            </div>
            <div class="overhaul-box">
              <div style="display: flex; margin: auto; width: 60%">
                <p class="check-no">检12-1</p>

                <p
                  class="check-no"
                  style="margin-left: 35px"
                  v-if="listSixObj.type && listSixObj.type == '断电作业'"
                >
                  {{ listSixObj.type }}
                </p>
                <p
                  class="check-no"
                  style="margin-left: 35px; color: red"
                  v-if="listSixObj.type && listSixObj.type != '断电作业'"
                >
                  {{ listSixObj.type }}
                </p>
                <p
                  class="check-no"
                  style="color: red; margin-left: 20px; font-size: 24px"
                >
                  {{ listSixObj.oneStartState }}
                </p>
                <p
                  class="check-no"
                  style="color: red; margin-left: 20px; font-size: 24px"
                >
                  {{ listSixObj.oneEndState }}
                </p>
              </div>
              <div class="check-top">
                <div class="check-text">车号：</div>
                <div class="check-num">{{ listSixObj.carCode || "/" }}</div>
                <div class="start-time-text">开始时间：</div>
                <div class="start-time">{{ listSixObj.startTime || "/" }}</div>
                <div class="duration">计划时间：</div>
                <div class="duration-time">
                  {{ listSixObj.planTime || "/" }}
                </div>
              </div>
              <div class="check-middle">
                <div
                  style="
                    display: flex;
                    width: 100%;
                    height: 45px;
                    margin-top: 15px;
                  "
                >
                  <span class="team workNamePad">班组：</span>
                  <vue-seamless-scroll
                    :data="listSixObj.tworkRecordReVoList"
                    :class-option="seamlessScrollOption"
                    class="warp"
                  >
                    <ul class="ul-item">
                      <li
                        :class="classS1(item.workTeamName.length)"
                        v-for="(item, index) in listSixObj.tworkRecordReVoList"
                        :key="item.id + index"
                      >
                        {{ item.workTeamName }}
                      </li>
                    </ul>
                  </vue-seamless-scroll>
                </div>
                <div
                  style="
                    display: flex;
                    width: 100%;
                    height: 45px;
                    margin-top: 15px;
                  "
                >
                  <span class="team">时间：</span>
                  <vue-seamless-scroll
                    :data="listSixObj.tworkRecordReVoList"
                    :class-option="seamlessScrollOption"
                    class="warp"
                  >
                    <ul class="ul-item">
                      <li
                        v-for="item in listSixObj.tworkRecordReVoList"
                        :key="item.id + '6'"
                        class="duration-num"
                        :class="classS1(item.workTeamName.length)"
                      >
                        {{ item.startShortTime }}
                      </li>
                    </ul>
                  </vue-seamless-scroll>
                </div>
              </div>
            </div>
            <div class="overhaul-box">
              <div style="display: flex; margin: auto; width: 60%">
                <p class="check-no">检13-1</p>

                <p
                  class="check-no"
                  style="margin-left: 35px"
                  v-if="listSevenObj.type && listSevenObj.type == '断电作业'"
                >
                  {{ listSevenObj.type }}
                </p>
                <p
                  class="check-no"
                  style="margin-left: 35px; color: red"
                  v-if="listSevenObj.type && listSevenObj.type != '断电作业'"
                >
                  {{ listSevenObj.type }}
                </p>
                <p
                  class="check-no"
                  style="color: red; margin-left: 20px; font-size: 24px"
                >
                  {{ listSevenObj.oneStartState }}
                </p>
                <p
                  class="check-no"
                  style="color: red; margin-left: 20px; font-size: 24px"
                >
                  {{ listSevenObj.oneEndState }}
                </p>
              </div>
              <div class="check-top">
                <div class="check-text">车号：</div>
                <div class="check-num">{{ listSevenObj.carCode || "/" }}</div>
                <div class="start-time-text">开始时间：</div>
                <div class="start-time">
                  {{ listSevenObj.startTime || "/" }}
                </div>
                <div class="duration">计划时间：</div>
                <div class="duration-time">
                  {{ listSevenObj.planTime || "/" }}
                </div>
              </div>
              <div class="check-middle">
                <div
                  style="
                    display: flex;
                    width: 100%;
                    height: 45px;
                    margin-top: 15px;
                  "
                >
                  <span class="team workNamePad">班组：</span>
                  <vue-seamless-scroll
                    :data="listSevenObj.tworkRecordReVoList"
                    :class-option="seamlessScrollOption"
                    class="warp"
                  >
                    <ul class="ul-item">
                      <li
                        :class="classS1(item.workTeamName.length)"
                        v-for="(
                          item, index
                        ) in listSevenObj.tworkRecordReVoList"
                        :key="item.id + index"
                      >
                        {{ item.workTeamName }}
                      </li>
                    </ul>
                  </vue-seamless-scroll>
                </div>
                <div
                  style="
                    display: flex;
                    width: 100%;
                    height: 45px;
                    margin-top: 15px;
                  "
                >
                  <span class="team">时间：</span>
                  <vue-seamless-scroll
                    :data="listSevenObj.tworkRecordReVoList"
                    :class-option="seamlessScrollOption"
                    class="warp"
                  >
                    <ul class="ul-item">
                      <li
                        v-for="item in listSevenObj.tworkRecordReVoList"
                        :key="item.id + '7'"
                        class="duration-num"
                        :class="classS1(item.workTeamName.length)"
                      >
                        {{ item.startShortTime }}
                      </li>
                    </ul>
                  </vue-seamless-scroll>
                </div>
              </div>
            </div>
            <div class="overhaul-box">
              <div style="display: flex; margin: auto; width: 60%">
                <p class="check-no">检14-1</p>

                <p
                  class="check-no"
                  style="margin-left: 35px"
                  v-if="listEightObj.type && listEightObj.type == '断电作业'"
                >
                  {{ listEightObj.type }}
                </p>
                <p
                  class="check-no"
                  style="margin-left: 35px; color: red"
                  v-if="listEightObj.type && listEightObj.type != '断电作业'"
                >
                  {{ listEightObj.type }}
                </p>
                <p
                  class="check-no"
                  style="color: red; margin-left: 20px; font-size: 24px"
                >
                  {{ listEightObj.oneStartState }}
                </p>
                <p
                  class="check-no"
                  style="color: red; margin-left: 20px; font-size: 24px"
                >
                  {{ listEightObj.oneEndState }}
                </p>
              </div>
              <div class="check-top">
                <div class="check-text">车号：</div>
                <div class="check-num">{{ listEightObj.carCode || "/" }}</div>
                <div class="start-time-text">开始时间：</div>
                <div class="start-time">
                  {{ listEightObj.startTime || "/" }}
                </div>
                <div class="duration">计划时间：</div>
                <div class="duration-time">
                  {{ listEightObj.planTime || "/" }}
                </div>
              </div>
              <div class="check-middle">
                <div
                  style="
                    display: flex;
                    width: 100%;
                    height: 45px;
                    margin-top: 15px;
                  "
                >
                  <span class="team workNamePad">班组：</span>
                  <vue-seamless-scroll
                    :data="listEightObj.tworkRecordReVoList"
                    :class-option="seamlessScrollOption"
                    class="warp"
                  >
                    <ul class="ul-item">
                      <li
                        :class="classS1(item.workTeamName.length)"
                        v-for="(
                          item, index
                        ) in listEightObj.tworkRecordReVoList"
                        :key="item.id + index"
                      >
                        {{ item.workTeamName }}
                      </li>
                    </ul>
                  </vue-seamless-scroll>
                </div>
                <div
                  style="
                    display: flex;
                    width: 100%;
                    height: 45px;
                    margin-top: 15px;
                  "
                >
                  <span class="team">时间：</span>
                  <vue-seamless-scroll
                    :data="listEightObj.tworkRecordReVoList"
                    :class-option="seamlessScrollOption"
                    class="warp"
                  >
                    <ul class="ul-item">
                      <li
                        v-for="item in listEightObj.tworkRecordReVoList"
                        :key="item.id + '8'"
                        class="duration-num"
                        :class="classS1(item.workTeamName.length)"
                      >
                        {{ item.startShortTime }}
                      </li>
                    </ul>
                  </vue-seamless-scroll>
                </div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <div class="overhaul-box">
              <div style="display: flex; margin: auto; width: 60%">
                <p class="check-no">检11-2</p>
                <p
                  class="check-no"
                  style="margin-left: 35px"
                  v-if="listObj.type && listObj.type == '断电作业'"
                >
                  {{ listObj.type }}
                </p>
                <p
                  class="check-no"
                  style="margin-left: 35px; color: red"
                  v-if="listObj.type && listObj.type != '断电作业'"
                >
                  {{ listObj.type }}
                </p>
                <p
                  class="check-no"
                  style="color: red; margin-left: 20px; font-size: 24px"
                >
                  {{ listObj.twoStartState }}
                </p>
                <p
                  class="check-no"
                  style="color: red; margin-left: 20px; font-size: 24px"
                >
                  {{ listObj.twoEndState }}
                </p>

              </div>
              <div class="check-top">
                <div class="check-text">车号：</div>
                <div class="check-num">{{ listObj.carCode || "/" }}</div>
                <div class="start-time-text">开始时间：</div>
                <div class="start-time">{{ listObj.startTime || "/" }}</div>
                <div class="duration">计划时间：</div>
                <div class="duration-time">{{ listObj.planTime || "/" }}</div>
              </div>
              <div class="check-middle">
                <div
                  style="
                    display: flex;
                    width: 100%;
                    height: 45px;
                    margin-top: 15px;
                  "
                >
                  <span class="team workNamePad">班组：</span>
                  <vue-seamless-scroll
                    :data="listObj.tworkRecordReVoList"
                    :class-option="seamlessScrollOption"
                    class="warp"
                  >
                    <ul class="ul-item">
                      <li
                        v-for="(item, index) in listObj.tworkRecordReVoList"
                        :class="classS1(item.workTeamName.length)"
                        :key="item.id + index"
                      >
                        {{ item.workTeamName }}
                      </li>
                    </ul>
                  </vue-seamless-scroll>
                </div>
                <div
                  style="
                    display: flex;
                    width: 100%;
                    height: 45px;
                    margin-top: 15px;
                  "
                >
                  <span class="team">时间：</span>
                  <vue-seamless-scroll
                    :data="listObj.tworkRecordReVoList"
                    :class-option="seamlessScrollOption"
                    class="warp"
                  >
                    <ul class="ul-item">
                      <li
                        v-for="item in listObj.tworkRecordReVoList"
                        :key="item.id + '1'"
                        class="duration-num"
                        :class="classS1(item.workTeamName.length)"
                      >
                        {{ item.startShortTime }}
                      </li>
                    </ul>
                  </vue-seamless-scroll>
                </div>
              </div>
            </div>
            <div class="overhaul-box">
              <div style="display: flex; margin: auto; width: 60%">
                <p class="check-no">检12-2</p>

                <p
                  class="check-no"
                  style="margin-left: 35px"
                  v-if="listTwoObj.type && listTwoObj.type == '断电作业'"
                >
                  {{ listTwoObj.type }}
                </p>
                <p
                  class="check-no"
                  style="margin-left: 35px; color: red"
                  v-if="listTwoObj.type && listTwoObj.type != '断电作业'"
                >
                  {{ listTwoObj.type }}
                </p>
                <p
                  class="check-no"
                  style="color: red; margin-left: 20px; font-size: 24px"
                >
                  {{ listTwoObj.twoStartState }}
                </p>
                <p
                  class="check-no"
                  style="color: red; margin-left: 20px; font-size: 24px"
                >
                  {{ listTwoObj.twoEndState }}
                </p>
              </div>
              <div class="check-top">
                <div class="check-text">车号：</div>
                <div class="check-num">{{ listTwoObj.carCode || "/" }}</div>
                <div class="start-time-text">开始时间：</div>
                <div class="start-time">{{ listTwoObj.startTime || "/" }}</div>
                <div class="duration">计划时间：</div>
                <div class="duration-time">
                  {{ listTwoObj.planTime || "/" }}
                </div>
              </div>
              <div class="check-middle">
                <div
                  style="
                    display: flex;
                    width: 100%;
                    height: 45px;
                    margin-top: 15px;
                  "
                >
                  <span class="team workNamePad">班组：</span>
                  <vue-seamless-scroll
                    :data="listTwoObj.tworkRecordReVoList"
                    :class-option="seamlessScrollOption"
                    class="warp"
                  >
                    <ul class="ul-item">
                      <li
                        :class="classS1(item.workTeamName.length)"
                        v-for="(item, index) in listTwoObj.tworkRecordReVoList"
                        :key="item.id + index"
                      >
                        {{ item.workTeamName }}
                      </li>
                    </ul>
                  </vue-seamless-scroll>
                </div>
                <div
                  style="
                    display: flex;
                    width: 100%;
                    height: 45px;
                    margin-top: 15px;
                  "
                >
                  <span class="team">时间：</span>
                  <vue-seamless-scroll
                    :data="listTwoObj.tworkRecordReVoList"
                    :class-option="seamlessScrollOption"
                    class="warp"
                  >
                    <ul class="ul-item">
                      <li
                        v-for="item in listTwoObj.tworkRecordReVoList"
                        :key="item.id + '2'"
                        class="duration-num"
                        :class="classS1(item.workTeamName.length)"
                      >
                        {{ item.startShortTime }}
                      </li>
                    </ul>
                  </vue-seamless-scroll>
                </div>
              </div>
            </div>
            <div class="overhaul-box">
              <div style="display: flex; margin: auto; width: 60%">
                <p class="check-no">检13-2</p>

                <p
                  class="check-no"
                  style="margin-left: 35px"
                  v-if="listThreeObj.type && listThreeObj.type == '断电作业'"
                >
                  {{ listThreeObj.type }}
                </p>
                <p
                  class="check-no"
                  style="margin-left: 35px; color: red"
                  v-if="listThreeObj.type && listThreeObj.type != '断电作业'"
                >
                  {{ listThreeObj.type }}
                </p>
                <p
                  class="check-no"
                  style="color: red; margin-left: 20px; font-size: 24px"
                >
                  {{ listThreeObj.twoStartState }}
                </p>
                <p
                  class="check-no"
                  style="color: red; margin-left: 20px; font-size: 24px"
                >
                  {{ listThreeObj.twoEndState }}
                </p>
              </div>
              <div class="check-top">
                <div class="check-text">车号：</div>
                <div class="check-num">{{ listThreeObj.carCode || "/" }}</div>
                <div class="start-time-text">开始时间：</div>
                <div class="start-time">
                  {{ listThreeObj.startTime || "/" }}
                </div>
                <div class="duration">计划时间：</div>
                <div class="duration-time">
                  {{ listThreeObj.planTime || "/" }}
                </div>
              </div>
              <div class="check-middle">
                <div
                  style="
                    display: flex;
                    width: 100%;
                    height: 45px;
                    margin-top: 15px;
                  "
                >
                  <span class="team workNamePad">班组：</span>
                  <vue-seamless-scroll
                    :data="listThreeObj.tworkRecordReVoList"
                    :class-option="seamlessScrollOption"
                    class="warp"
                  >
                    <ul class="ul-item">
                      <li
                        :class="classS1(item.workTeamName.length)"
                        v-for="(
                          item, index
                        ) in listThreeObj.tworkRecordReVoList"
                        :key="item.id + index"
                      >
                        {{ item.workTeamName }}
                      </li>
                    </ul>
                  </vue-seamless-scroll>
                </div>
                <div
                  style="
                    display: flex;
                    width: 100%;
                    height: 45px;
                    margin-top: 15px;
                  "
                >
                  <span class="team">时间：</span>
                  <vue-seamless-scroll
                    :data="listThreeObj.tworkRecordReVoList"
                    :class-option="seamlessScrollOption"
                    class="warp"
                  >
                    <ul class="ul-item">
                      <li
                        v-for="item in listThreeObj.tworkRecordReVoList"
                        :key="item.id + '3'"
                        class="duration-num"
                        :class="classS1(item.workTeamName.length)"
                      >
                        {{ item.startShortTime }}
                      </li>
                    </ul>
                  </vue-seamless-scroll>
                </div>
              </div>
            </div>
            <div class="overhaul-box">
              <div style="display: flex; margin: auto; width: 60%">
                <p class="check-no">检14-2</p>

                <p
                  class="check-no"
                  style="margin-left: 35px"
                  v-if="listFourObj.type && listFourObj.type == '断电作业'"
                >
                  {{ listFourObj.type }}
                </p>
                <p
                  class="check-no"
                  style="margin-left: 35px; color: red"
                  v-if="listFourObj.type && listFourObj.type != '断电作业'"
                >
                  {{ listFourObj.type }}
                </p>
                <p
                  class="check-no"
                  style="color: red; margin-left: 20px; font-size: 24px"
                >
                  {{ listFourObj.twoStartState }}
                </p>
                <p
                  class="check-no"
                  style="color: red; margin-left: 20px; font-size: 24px"
                >
                  {{ listFourObj.twoEndState }}
                </p>
              </div>
              <div class="check-top">
                <div class="check-text">车号：</div>
                <div class="check-num">{{ listFourObj.carCode || "/" }}</div>
                <div class="start-time-text">开始时间：</div>
                <div class="start-time">{{ listFourObj.startTime || "/" }}</div>
                <div class="duration">计划时间：</div>
                <div class="duration-time">
                  {{ listFourObj.planTime || "/" }}
                </div>
              </div>
              <div class="check-middle">
                <div
                  style="
                    display: flex;
                    width: 100%;
                    height: 45px;
                    margin-top: 15px;
                  "
                >
                  <span class="team workNamePad">班组：</span>
                  <vue-seamless-scroll
                    :data="listFourObj.tworkRecordReVoList"
                    :class-option="seamlessScrollOption"
                    class="warp"
                  >
                    <ul class="ul-item">
                      <li
                        :class="classS1(item.workTeamName.length)"
                        v-for="(item, index) in listFourObj.tworkRecordReVoList"
                        :key="item.id + index"
                      >
                        {{ item.workTeamName }}
                      </li>
                    </ul>
                  </vue-seamless-scroll>
                </div>
                <div
                  style="
                    display: flex;
                    width: 100%;
                    height: 45px;
                    margin-top: 15px;
                  "
                >
                  <span class="team">时间：</span>
                  <vue-seamless-scroll
                    :data="listFourObj.tworkRecordReVoList"
                    :class-option="seamlessScrollOption"
                    class="warp"
                  >
                    <ul class="ul-item">
                      <li
                        v-for="item in listFourObj.tworkRecordReVoList"
                        :key="item.id + '4'"
                        class="duration-num"
                        :class="classS1(item.workTeamName.length)"
                      >
                        {{ item.startShortTime }}
                      </li>
                    </ul>
                  </vue-seamless-scroll>
                </div>
              </div>
            </div>
          </div>
        </el-col>

      </el-row>
    </div>
  </div>
</template>

<script>
import { shopsList } from "@/api/daping/daping";
import vueSeamlessScroll from "vue-seamless-scroll";

export default {
  components: {
    vueSeamlessScroll,
  },
  name: "workshop",
  data() {
    return {
      timer: null,
      scrollTime: null,
      scrollW: 0, //记录滚动到哪了
      items: [],
      animate: false,
      newFiveList: [],
      classOption: {
        limitMoveNum: 2,
        direction: 2,
      },
      listArr: [],
      listObj: {
        carCode: "",
        startTime: "",
        startShortTime: "",
        type: "",
        twoStartState: "",
        twoEndState: "",
        oneStartState: "",
        oneEndState: "",
      },
      listTwoArr: [],
      listTwoObj: {
        carCode: "",
        startTime: "",
        startShortTime: "",
        type: "",
        twoStartState: "",
        twoEndState: "",
        oneStartState: "",
        oneEndState: "",
      },
      listThreeArr: [],
      listThreeObj: {
        carCode: "",
        startTime: "",
        startShortTime: "",
        type: "",
        twoStartState: "",
        twoEndState: "",
        oneStartState: "",
        oneEndState: "",
      },
      listFourArr: [],
      listFourObj: {
        carCode: "",
        startTime: "",
        startShortTime: "",
        type: "",
        twoStartState: "",
        twoEndState: "",
        oneStartState: "",
        oneEndState: "",
      },
      listFiveArr: [],
      listFiveObj: {
        carCode: "",
        startTime: "",
        startShortTime: "",
        type: "",
        twoStartState: "",
        twoEndState: "",
        oneStartState: "",
        oneEndState: "",
      },
      listSixArr: [],
      listSixObj: {
        carCode: "",
        startTime: "",
        startShortTime: "",
        type: "",
        twoStartState: "",
        twoEndState: "",
        oneStartState: "",
        oneEndState: "",
      },
      listSevenArr: [],
      listSevenObj: {
        carCode: "",
        startTime: "",
        startShortTime: "",
        type: "",
        twoStartState: "",
        twoEndState: "",
        oneStartState: "",
        oneEndState: "",
      },
      listEightArr: [],
      listEightObj: {
        carCode: "",
        startTime: "",
        startShortTime: "",
        type: "",
        twoStartState: "",
        twoEndState: "",
        oneStartState: "",
        oneEndState: "",
      },
      flag: false,
      flagTwo: false,
      flagThree: false,
      flagFour: false,
      flagFive: false,
      flagSix: false,
      flagSeven: false,
      flagEight: false,
    };
  },
  mounted() {
    Promise.all([
      this.getShopsList(),
      this.getShopsList2(),
      this.getShopsList3(),
      this.getShopsList4(),
      this.getShopsList5(),
      this.getShopsList6(),
      this.getShopsList7(),
      this.getShopsList8(),
    ]).then((res) => {
      this.settimedata();
    });


  },
  computed: {
    seamlessScrollOption() {
      return {
        step: 0.6, // 数值越大速度滚动越快
        hoverStop: false, // 是否开启鼠标悬停stop
        direction: 2, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      };
    },
  },
  destroyed() {
    this.timer = null;
    clearInterval(this.timer);
  },
  methods: {
    classS1(length) {
      let v = [];
      if (length <= 5) {
        v.push("team-num");
      }
      if (length == 6) {
        v.push("team-numsix");
      }
      if (length >= 7) {
        v.push("team-numseven");
      }
      return v;
    },
     settimedata() {
      this.timer = setInterval(() => {
        this.getShopsList(),
          this.getShopsList2(),
          this.getShopsList3(),
          this.getShopsList4(),
          this.getShopsList5(),
          this.getShopsList6(),
          this.getShopsList7(),
          this.getShopsList8();
      }, 1000 * 10);
    },
    // 检11-2
    getShopsList() {

       return new Promise((resolve) => {
        let params = {
        complete: 2,
        trackId: 1,
      };
      shopsList(params).then((res) => {
        this.listArr = res.rows;
        if (res.rows.length > 0) {
          this.listObj = res.rows[0];
          console.log(this.listObj);
        } else {
          this.listObj = {
            carCode: "",
            startTime: "",
            startShortTime: "",
            type: "",
            twoStartState: "",
            twoEndState: "",
            oneStartState: "",
            oneEndState: "",
          };
        }
         resolve();
      });
      });
    },
    // 检12-2
    getShopsList2() {

      //  this.orderTwoShow();

          return new Promise((resolve) => {
           let params2 = {
        complete: 2,
        trackId: 2,
      };

      shopsList(params2).then((res) => {
        this.listTwoArr = res.rows;
        if (res.rows.length > 0) {
          this.listTwoObj = res.rows[0];
        } else {
          this.listTwoObj = {
            carCode: "",
            startTime: "",
            startShortTime: "",
            type: "",
            twoStartState: "",
            twoEndState: "",
            oneStartState: "",
            oneEndState: "",
          };
        }
         resolve();
      });
      });
    },
    // 检13-2
    getShopsList3() {

      //  this.orderThreeShow();

          return new Promise((resolve) => {
       let params3 = {
        complete: 2,
        trackId: 3,
      };

      shopsList(params3).then((res) => {
        this.listThreeArr = res.rows;
        if (res.rows.length > 0) {
          this.listThreeObj = res.rows[0];
        } else {
          this.listThreeObj = {
            carCode: "",
            startTime: "",
            startShortTime: "",
            type: "",
            twoStartState: "",
            twoEndState: "",
            oneStartState: "",
            oneEndState: "",
          };
        }
         resolve();
      });
      });
    },
    // 检14-2
    getShopsList4() {

      //  this.orderFourShow();


          return new Promise((resolve) => {
        let params4 = {
        complete: 2,
        trackId: 4,
      };

      shopsList(params4).then((res) => {
        this.listFourArr = res.rows;
        if (res.rows.length > 0) {
          this.listFourObj = res.rows[0];
        } else {
          this.listFourObj = {
            carCode: "",
            startTime: "",
            startShortTime: "",
            type: "",
            twoStartState: "",
            twoEndState: "",
            oneStartState: "",
            oneEndState: "",
          };
        }
         resolve();
      });
      });
    },
    // 检11-1
    getShopsList5() {

      //  this.orderFiveShow();

          return new Promise((resolve) => {
        let params5 = {
        complete: 1,
        trackId: 1,
      };

      shopsList(params5).then((res) => {
        this.listFiveArr = res.rows;
        if (res.rows.length > 0) {
          this.listFiveObj = res.rows[0];
        } else {
          this.listFiveObj = {
            carCode: "",
            startTime: "",
            startShortTime: "",
            type: "",
            twoStartState: "",
            twoEndState: "",
            oneStartState: "",
            oneEndState: "",
          };
        }
         resolve();
      });
      });
    },
    // 检12-1
    getShopsList6() {

      // this.orderSixShow();

          return new Promise((resolve) => {
        let params6 = {
        complete: 1,
        trackId: 2,
      };

      shopsList(params6).then((res) => {
        this.listSixArr = res.rows;
        if (res.rows.length > 0) {
          this.listSixObj = res.rows[0];
        } else {
          this.listSixObj = {
            carCode: "",
            startTime: "",
            startShortTime: "",
            type: "",
            twoStartState: "",
            twoEndState: "",
            oneStartState: "",
            oneEndState: "",
          };
        }
         resolve();
      });
      });
    },
    // 检13-1
    getShopsList7() {

      //  this.orderSevenShow();

          return new Promise((resolve) => {
         let params7 = {
        complete: 1,
        trackId: 3,
      };

      shopsList(params7).then((res) => {
        this.listSevenArr = res.rows;
        if (res.rows.length > 0) {
          this.listSevenObj = res.rows[0];
        } else {
          this.listSevenObj = {
            carCode: "",
            startTime: "",
            startShortTime: "",
            type: "",
            twoStartState: "",
            twoEndState: "",
            oneStartState: "",
            oneEndState: "",
          };
        }
         resolve();
      });
      });
    },
    // 检14-1
    getShopsList8() {

      //  this.orderEightShow();


          return new Promise((resolve) => {
             let params8 = {
        complete: 1,
        trackId: 4,
      };

      shopsList(params8).then((res) => {
        this.listEightArr = res.rows;
        if (res.rows.length > 0) {
          this.listEightObj = res.rows[0];
        } else {
          this.listEightObj = {
            carCode: "",
            startTime: "",
            startShortTime: "",
            type: "",
            twoStartState: "",
            twoEndState: "",
            oneStartState: "",
            oneEndState: "",
          };
        }
         resolve();
      });
      });
    },
    // 检11-2 更新数据
    orderShow() {
      let timer = setInterval(() => {
        this.getShopsList();
      }, 1000 * 10);
    },
    // 检12-2 更新数据
    orderTwoShow() {
      let timer = setInterval(() => {
        this.getShopsList2();
      }, 1000 * 10);
    },
    // 检13-2 更新数据
    orderThreeShow() {
      let timer = setInterval(() => {
        this.getShopsList3();
      }, 1000 * 10);
    },
    // 检14-2 更新数据
    orderFourShow() {
      let timer = setInterval(() => {
        this.getShopsList4();
      }, 1000 * 10);
    },
    // 检11-1 更新数据
    orderFiveShow() {
      let timer = setInterval(() => {
        this.getShopsList5();
      }, 1000 * 10);
    },
    // 检12-1 更新数据
    orderSixShow() {
      let timer = setInterval(() => {
        this.getShopsList6();
      }, 1000 * 10);
    },
    // 检13-1 更新数据
    orderSevenShow(arr) {
      let timer = setInterval(() => {
        this.getShopsList7();
      }, 1000 * 10);
    },
    // 检14-1 更新数据
    orderEightShow(arr) {
      let timer = setInterval(() => {
        this.getShopsList8();
      }, 1000 * 10);
    },
  },
};
</script>
<style lang="scss" scoped>
// .workNamePad {
//   padding-right: 52px;
// }
#box {
  width: 100%;
}
.anim {
  // transition: all 0.5s;
  margin-top: -30px;
}
#con1 li {
  list-style: none;
  line-height: 30px;
  height: 30px;
}
.warp {
  width: 825px;
  height: 45px;
  margin: 0;
  overflow: hidden;
  ul {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    &.ul-item {
      display: flex;
      .li-item {
        width: 150px;
        height: 120px;
        margin-right: 10px;
        line-height: 120px;
        background-color: #999;
        color: #fff;
        text-align: center;
        font-size: 30px;
      }
    }
  }
}
.app-container {
  min-width: 1900px;
  height: 1080px;
  // width: 100%;
  background: url("../assets/images/dapingbg2.jpg") 0 0 no-repeat;
  background-size: 100% 100%;
  padding: 10px !important;
  .row-layout {
    .grid-content {
      .overhaul-box {
        width: 100%;
        height: 260px;
        background: url("../assets/images/jianchabg.png") 0 0 no-repeat;
        background-size: 100% 100%;
        margin-bottom: 6px;
        .check-no {
          text-align: center;
          line-height: 70px;
          font-size: 30px;
          font-weight: 600;
          color: #00ff6c;
          letter-spacing: 1px;
          margin: 0;
        }
        .check-top {
          display: flex;
          margin-top: 10px;
          // padding: 10px 20px 15px;
          .check-text,
          .start-time-text,
          .duration {
            height: 45px;
            margin-left: 10px;
            font-size: 24px;
            color: #fff;
            letter-spacing: 2px;
          }
          .check-num,
          .start-time,
          .duration-time {
            font-size: 24px;
            display: inline-block;
            height: 45px;
            background-color: #003567;
            text-align: center;
            color: #fff;
            padding: 5px;
          }
          .duration-time {
            width: 180px;
          }
          .check-num {
            width: 245px;
          }
          .start-time {
            width: 100px;
          }
        }
        .check-middle {
          padding: 0 10px 20px;
          .team,
          .duration-text {
            // margin-top: 15px;
            font-size: 24px;
            color: #fff;
            letter-spacing: 2px;
          }
          .team-num,
          .duration-num {
            display: inline-block;
            background-color: #003567;
            text-align: center;
            color: #fff;
            height: 50px;
            width: 160px;
            font-size: 24px;
            padding: 3px 0;
          }
          .team-numseven {
            display: inline-block;
            background-color: #003567;
            text-align: center;
            color: #fff;
            height: 50px;
            width: 207px;
            font-size: 24px;
            padding: 3px 0;
          }
          .team-numsix {
            display: inline-block;
            background-color: #003567;
            text-align: center;
            color: #fff;
            height: 50px;
            width: 190px;
            font-size: 24px;
            padding: 3px 0;
          }
          .duration-num {
            text-align: center;
            // width: 200px;
            background-color: #020f3b;
            padding: 3px 0;
            color: #fff;
          }
        }
        .check-bottom {
          padding: 0 20px;
        }
      }
    }
  }
}
</style>
